<template>
  <div class="bc-icon"
    :style="{
        display: 'inline-flex',
        height: iconSize,
        width: iconSize
    }">
    <svg :style="{fill:color}" :class="[
      {
        // '~'位运算符(非位)用于对一个二进制操作数逐位进行取反操作，
        // 位非运算实际上就是对数字进行取负运算，再减 1。
        // -(-1) - 1 = 0 => false 此处也可以用!
        'icon-loading':~name.indexOf('load'),
        'is-disabled':disabled
      }
    ]">
      <use :xlink:href="`#icon-${name}`" />
    </svg>
  </div>
</template>

<script>
export default {
  name: "bcIcon",
  props: {
    disabled: Boolean,
    color: String,
    name: {
      type: String,
      required: true
    },
    size: {
      type: [Number, String],
      default: "1rem"
    }
  },
  computed: {
    iconSize() {
      if (typeof this.size === "number") return this.size + "px";
      else return this.size;
    }
  }
};
</script>

<style scoped>
.bc-icon .icon-loading {
  animation: rotating 1s linear infinite;
}
.bc-icon .is-disabled {
  cursor: not-allowed;
  fill: #bbb;
}
@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>